<template>
  <div class="scorecreatewrapper zanwei-top">
    <!-- 抢购成功页面 -->
    <head-nav></head-nav>
    <div class="scorecreate" v-if="rowobj">
      <div class="scorecreate-top-img">
        <img v-if="rowobj.XQT[0]" :src="rowobj.XQT[0]"/>
      </div>
      <div class="scorecreate-top">
        <h3>{{rowobj.LPMC}}</h3>
        <span v-if="rowobj.JF">{{rowobj.JF}}积分</span>
        <!-- <b>会员： mm7832666</b> -->
        <p>恭喜您抢购成功！</p>
        <div class="fhlist">
          <mt-button type="primary" @click.native="gobacklist">继续逛逛</mt-button>
        </div>
      </div>
      <div class="scorecreate-bottom">
        <div class="qrcode" id="qrcode">
          <!-- <img/> -->
        </div>
        <p style="margin-bottom: 0.3rem;">订单编号：{{rowobj.DDH}}</p>
        <p style="margin-bottom: 0.3rem;" v-if="rowobj.TRANSACTION_ID">交易单号：{{rowobj.TRANSACTION_ID}}</p>
        <!-- <p>验证码已经生成，请凭验证码及有效证件至五楼贵宾厅兑换领取。</p> -->
        <p>{{rowobj.HXDD}}</p>
      </div>
    </div>
    <div class="zanwei-bottom"></div>
    <!-- 底部导航 -->
    <!-- <foot-nav></foot-nav> -->
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  import api from '@/api/api'
  import { Toast, MessageBox } from 'mint-ui';

  export default {
    data () {
      return {
        rowobj: null
      }
    },
    methods: {
      ...mapActions({
        commit_title1: 'commit_title'
      }),
      // 返回列表
      gobacklist(){
        // this.$router.go(-3); //返回上3层
        this.$router.push('/wallet')
      },
      checkHX (pdid) {
        let page = this
        var userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
         /**
         * 查询一个我的订单
         * @param page
         * @param cb
         * @param userid 用户卡号
         * @param oid 订单id
         */
        api.getUserOrder(page,cb,userinfo.vipcode,pdid,"")
        function cb (res) {

          let re = res.data
          if (re.code == 0) {
            let data = JSON.parse(re.data)
            let hx = data.SFHX
            if (hx == 1) {
              clearInterval(sss)
              Toast({
                message: "已核销",
                iconClass: 'iconfont icon-duigou yhx',
                duration: 3000
              });
              setTimeout(function () {
                page.$router.push('/wallet')
              }, 3000)
            }

          } else {
            Toast({
              message: re.msg,
              duration: 3000
            });
          }
        }
      }
    },
    mounted () {
      let page = this
      if (Object.getOwnPropertyNames(this.$route.params).length !== 0 && this.$route.params.id !== '[object Object]') {
        // let id = this.$route.params.id
        let pdid = this.$route.params.id
        var userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
        /**
         * 查询一个我的订单
         * @param page
         * @param cb
         * @param userid 用户卡号
         * @param oid 订单id
         */
        api.getUserOrder(page,cb,userinfo.vipcode,pdid,"")
        function cb (res) {
          let re = res.data
          if (re.code == 0) {
            let data = JSON.parse(re.data)
            // page.$store.state.title = data.LPMC//更改标题栏文字
            page.commit_title1(data.LPMC)//更改标题栏文字
            console.log('wod ee')
            console.log(data)
            let XQT = data.XQT.map(x => {
              return page.host.filehost + x
            })
            data.XQT = XQT
            page.rowobj = data
            page.$nextTick(function () {
              var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: data.ID,
                width: 128,
                height: 128,
                colorDark : "#000000",
                colorLight : "#ffffff"
              });
            })


            // 核销监听
//          let date = new Date()
//            if(page.rowobj.SFHX==0){
//                sss = setInterval(function () {
//                    let dateNow = new Date()
//                    let time = dateNow - date
//                    console.log(time)
//                    if (time < 300000) {
//                        page.checkHX(pdid)
//                    } else {
//                        clearInterval(sss)
//                        MessageBox.alert("长时间未核销正帮您跳转..").then(action => {
//                            page.$router.push({ path: "/score" });
//                        });
//                    }
//                }, 1000)
//            }



          } else {
            Toast({
              message: re.msg,
              duration: 3000
            });
          }
        }


      } else {
        console.log('xixixi2')
      }

   },
  }
</script>

<style lang="less">
.yhx {
  font-size: 0.55rem;
}
.scorecreatewrapper {
  .scorecreate {
    .scorecreate-top-img {
      /* width: 4.4rem;
      height: 1.7rem;
      border: #cbcbcc solid 1px;
      margin-top: 1.12rem;
      margin-bottom: 0.6rem; */
      width: 100%;
      height: 4rem;
      /* border: #cbcbcc solid 1px; */
      margin-bottom: 0.4rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .scorecreate-top {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 0.2rem;
      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dashed #F05DC4;
        transform: scaleY(0.5);
        transform-origin: 0 100%;
      }
      h3 {
        font-size: 0.32rem;
        color: #000000;
      }
      span {
        color: #F05DC4;
        font-size: 0.32rem;
        margin-top: 0.2rem;
        margin-bottom: 0.6rem;
      }
      b {
        display: block;
        color: #000000;
        font-size: 0.24rem;
      }
      p {
        color: #F05DC4;
        font-size: 0.32rem;
        margin-top: 0.04rem;
        margin-bottom: 0.2rem;
        text-indent: 0.28rem;
      }
    }
    .scorecreate-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      .qrcode {
        width: 2.8rem;
        height: 2.8rem;
        /* border: #cbcbcc solid 1px; */
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        width: 4.56rem;
        font-size: 0.24rem;
        color: #000000;
        text-align: center;
      }
    }
  }
}
.fhlist{
  padding-bottom: .2rem;
}
</style>
